<template>
  <div class="op-group comp-op-merge">
    <div class="op-title">嵌合成数组</div>
    <div class="option-item">
      <div v-if="isShowSub === false" class="title-row">
        <span class="label">
          <span
            v-if="!isShowSub"
            class="view-icon"
            title="预览"
            @mouseleave="onMouseLeave()"
            @mouseenter="onMouseEnter($event, columnMergeColumns)"
          >
            <img src="~@/assets/dataset/preview.png" alt="preview" />
          </span>
          多列嵌合
        </span>
        <a-button class="op-btn" size="small" @click="isShowSub = true"
          >编辑</a-button
        >
        <a-button
          class="op-btn"
          type="primary"
          size="small"
          @click="doOption($event, columnMergeColumns)"
          >确定</a-button
        >
      </div>
      <div v-if="isShowSub" class="detail-panel">
        <h6 class="op-sub-title h38 mt8">
          <span
            class="view-icon"
            title="预览"
            @mouseleave="onMouseLeave()"
            @mouseenter="onMouseEnter($event, columnMergeColumns)"
          >
            <img src="~@/assets/dataset/preview.png" alt="preview" />
          </span>
          多列嵌合
        </h6>
        <div class="merge-item-column">
          <span class="label">
            合并后列名
          </span>
          <a-input
            v-model="newColumnName"
            size="small"
            @input="onInput"
          ></a-input>
        </div>
        <div class="button-row">
          <a-button class="op-btn-sub" size="small" @click="cancel"
            >取消</a-button
          >
          <a-button
            class="op-btn-sub"
            type="primary"
            size="small"
            @click="doOption($event, columnMergeColumns)"
            >确定</a-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
/**
 * 嵌合数组推荐
 */
import DataStore, { OptionPreViewAction } from '@/store/modules/dataview'
import { Component, Vue, Watch } from 'vue-property-decorator'

@Component({
  components: {},
})
export default class ChimeraArrayRecommend extends Vue {
  /** 列嵌合数组操作 */
  columnMergeColumns: string = OptionPreViewAction.columnsChimeraIntoArray

  /** 是否展示操作详情 */
  isShowSub: boolean = false

  /** 新列名绑定名称 */
  newColumnName: string = ''

  mounted() {
    this.newColumnName = DataStore.tableSelectColumns.reduce(
      (rec, item, currentIndex) => {
        return rec + (currentIndex > 0 ? '_' : '') + item.name
      },
      ''
    )
    DataStore.setChimeraJsonNewColumnName(this.newColumnName)
  }

  /** 输入事件回调 */
  onInput() {
    setTimeout(() => {
      DataStore.setChimeraJsonNewColumnName(this.newColumnName)
    }, 10)
  }

  /** 取消 */
  cancel() {
    this.newColumnName = ''
    this.isShowSub = false
    this.onInput()
  }

  /** 执行操作 */
  doOption($event: any, option: string) {
    if (option === `${OptionPreViewAction.columnsChimeraIntoArray}`) {
      this.$emit('actiondone', {
        action: OptionPreViewAction.columnsChimeraIntoArray,
        desc: '列操作 > 嵌合成对象',
        data: {
          newColumnName: this.newColumnName,
        },
      })
    }
  }

  /** 表格列信息 */
  private get tableSelectColumns() {
    return DataStore.tableSelectColumns
  }

  /** 监听表格列名，并执行相关操作 */
  @Watch('tableSelectColumns', { deep: true })
  getTableSelectColumns() {
    this.newColumnName = DataStore.tableSelectColumns.reduce(
      (rec, item, currentIndex) => {
        return rec + (currentIndex > 0 ? '_' : '') + item.name
      },
      ''
    )
    this.onInput()
  }

  /** 预览鼠标移入 */
  onMouseEnter(event: any, action: string) {
    const target = event.target as HTMLElement
    if (target) {
      DataStore.setPreviewAction(action)
      DataStore.setHoverYPos(target.getBoundingClientRect().top - 16)
    }
  }

  /** 预览鼠标移出 */
  onMouseLeave() {
    DataStore.setHoverYPos(-1)
  }
}
</script>
<style lang="less" scoped>
@import url('../op.less');
</style>
